<template>
    <div class="tabl-box">
        <div class="tablone">
            <h2>个人信息</h2>
        </div>
        <div class="tabltwo">
            <span>个人信息</span>
            <el-form :model="form" label-width="120px" >
                <el-form-item label="姓名" prop="name">
                    <span>{{ form.name }}</span>
                    <!-- <el-input v-model="form.name" /> -->
                </el-form-item>
                <el-form-item label="微信">
                    <!-- <el-input v-model="form[0].wei" /> -->
                    <!-- <span>{{form[0].wei}}</span> -->
                </el-form-item>
                <el-form-item label="电话">
                    <el-input />
                </el-form-item>
                <el-form-item label="QQ">
                    <el-input />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input />
                </el-form-item>
            </el-form>
        </div>
        <div class="tablthree">
            <span>个人信息</span>
            <el-form :model="form" label-width="120px">
                <el-form-item label="账户">
                    <el-input />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input />
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item> -->
            </el-form>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive} from 'vue'
import service from '@/utils/request'

// import { toRaw } from '@vue/reactivity';

interface Admin {
    adminname: string,
    password: number,
    name: string,
    wei: string,
    phone: number,
    QQ: number,
    emial: string
}

var form = reactive<Admin[]>([])

// var form = reactive({
//     adminname: '',
//     password: '',
//     name: '',
//     wei: '',
//     phone: '',
//     QQ: '',
//     emial: ''
// })

//获取个人信息
const adminlist = () => {
    service({
        url: "http://localhost:3000/cipher"
    }).then(res => {
        // form.push(res.data)
        // console.log(form);
        // form.push(...res.data)
        form=res.data
        console.log(form);
        
    })
}
adminlist()

</script>
<style scoped>
/* .tablone{
    margin-top: 20px;
} */
.tablone h2 {
    margin-top: 20px;
}

.tabltwo {
    margin-top: 20px;
    /* background-color: white; */
    background-color: rgba(255, 255, 255, 0.488);
    padding: 50px;
}

.el-form {
    margin-top: 20px;
}

.tablthree {
    /* background-color: white; */
    background-color: rgba(255, 255, 255, 0.464);
    margin-top: 20px;
    padding: 50px;
}

.el-input {
    width: 500px;
}
</style>